<template>
    <div class="home">
      <h1 class="logo">
        <a href="/">
          <img src="@/assets/img/hb/logo.png" alt="">
        </a>
        <span class="el-icon-time">{{ clock }}</span>
      </h1>
      <div class="banner">
        <div class="top-item">
          <router-link to="/market" class="item-link" target="_black">
            <img src="@/assets/img/zidonghuasuo/icon1.png" alt="">
            <span>深度学习</span>
          </router-link>
          <a href="http://127.0.0.1:8081/" class="item-link" target="_black">
            <img src="@/assets/img/zidonghuasuo/icon2.png" alt="">
            <span>强化学习</span>
          </a>
          <a href="http://101.200.128.17:3000/#/" class="item-link" target="_black">
            <img src="@/assets/img/zidonghuasuo/icon3.png" alt="">
            <span>集群管理</span>
          </a>
        </div>
        <div class="banner-item">
          <router-link to="">
            <img src="@/assets/img/zidonghuasuo/icon4.png" alt="">
          </router-link>
        </div>
      </div>
      <ul class="data-lis">
        <li class="lis1">
          <span class="title">数据集</span>
          <span class="detail">
            567
            <span>数据量</span>
          </span>
        </li>
        <li class="lis2">
          <span class="title">模型库</span>
          <span class="detail">
            422
            <span>数据量</span>
          </span>
        </li>
        <li class="lis3">
          <span class="title">算法库</span>
          <span class="detail">
            434
            <span>数据量</span>
          </span>
        </li>
        <li class="lis4">
          <span class="title">智能体模型</span>
          <span class="detail">
            22
            <span>数据量</span>
          </span>
        </li>
      </ul>
      <div class="clan">
        <div class="title">
          <p class="name">集群状态</p>
          <p class="number">
            20
            <span>台</span>
          </p>
        </div>
        <div class="item">
          <p>
            计算节点
            <span class="fault">异常</span>
            <!-- <span :class="">正常</span> -->
          </p>
          <v-image :src="require('@/assets/img/zidonghuasuo/item1.png')" class="pic" />
        </div>
        <div class="item">
          <p>
            计算节点
            <span class="healthy">正常</span>
          </p>
          <v-image :src="require('@/assets/img/zidonghuasuo/item2.png')" class="pic" />
        </div>
        <div class="item">
          <p>
            计算节点
            <span class="healthy">正常</span>
          </p>
          <v-image :src="require('@/assets/img/zidonghuasuo/item3.png')" class="pic" />
        </div>
        <div class="item">
          <p>
            计算节点
            <span class="healthy">正常</span>
          </p>
          <v-image :src="require('@/assets/img/zidonghuasuo/item4.png')" class="pic" />
        </div>
      </div>
      <!-- <p class="footer">版权所有：北京XXXXXXXXX研究院 ｜ 北京XXXXXXXXXXXX集团公司 ©北京XXXXXXXXXX公司 京ICP备20030409号 京公网安备 11010802976945号</p> -->
    </div>
  </template>
  
  <script>
  import { formatTime } from '@/utils/tool'
  export default {
    name: "zidonghuasuo",
    data () {
      return {
        clock: '',
        clockTime: null
      };
    },
    components: {
      
    },
    methods: {
      
    },
    created () {
      
    },
    watch: {},
    mounted () {
      this.clockTime = setInterval(() => {
        this.clock = formatTime(new Date(), 'YYYY-MM-DD HH:mm:ss')
      }, 1000)
    },
    destroyed() {
      clearInterval(this.clockTime)
    },
  };
  </script>
  <style lang="less" scoped>
  .logo{
    padding: 0 24px;
    overflow: hidden;
    a{
      padding-top: 10px;
      float: left;
      img{
        display: block;
        height: 36px;
      }
    }
    span{
      color: #347AF8;
      font-weight: bold;
      font-size: 24px;
      line-height: 56px;
      float: right;
    }
  }
  .home{
    background: #F5F5F5;
    padding: 0 24px;
  }
  .banner{
    background: url(~@/assets/img/zidonghuasuo/home-banner.png) no-repeat center 0 #FFF;
    background-size: 1872px 806px;
    width: 100%;
    height: 806px;
    overflow: hidden;
    .top-item{
      width: 1188px;
      margin: 58px auto 0;
      display: flex;
      justify-content: space-between;
      .item-link{
        width: 218px;
        background: url(~@/assets/img/zidonghuasuo/icon-bg.png) no-repeat;
        background-size: 218px 262px;
        display: block;
        img{
          display: block;
          width: 105px;
          height: 100px;
          margin: 48px auto 0;
        }
        span{
          margin-top: 125px;
          line-height: 34px;
          text-align: center;
          display: block;
          font-size: 24px;
          color: #3D3D3D;
        }
      }
    }
    .banner-item{
      img{
        display: block;
        width: 446px;
        height: 347px;
        margin: 0 auto;
      }
    }
  }
  .data-lis{
    padding: 8px 12px;
    background: #FFF;
    display: flex;
    margin-top: 16px;
    li{
      height: 150px;
      flex: 1;
      margin: 0 12px;
      border-radius: 8px;
      .title{
        float: left;
        font-weight: bold;
        font-size: 24px;
        line-height: 150px;
        color: #FFF;
        padding-left: 38px;
      }
      .detail{
        float: right;
        padding-right: 40px;
        font-size: 36px;
        padding-top: 60px;
        color: #FFF;
        text-align: right;
        display: block;
        font-family: "BM Hanna Pro-Regular, BM Hanna Pro";
        span{
          padding-top: 10px;
          line-height: 20px;
          display: block;
          font-size: 14px;
        }
      }
    }
    .lis1{
      background: linear-gradient(134deg, #F1C04A 0%, #EE7E4C 100%);
    }
    .lis2{
      background: linear-gradient(135deg, #60A7F8 0%, #2E79F6 100%);
    }
    .lis3{
      background: linear-gradient(135deg, #7DDEF8 0%, #00ADE9 99%);
    }
    .lis4{
      background: linear-gradient(135deg, #A7A2FF 0%, #746DFC 100%);
    }
  }
  .clan{
    display: flex;
    margin-top: 16px;
    width: 100%;
    .title{
      width: 280px;
      height: 210px;
      background: #FFFFFF;
      .name{
        font-size: 32px;
        line-height: 52px;
        padding-top: 50px;
        text-align: center;
      }
      .number{
        height: 45px;
        font-size: 32px;
        font-weight: 600;
        color: #2E79F6;
        text-align: center;
        margin-top: 10px;
        span{
          color: #3D3D3D;
          font-size: 14px;
        }
      }
    }
    .item{
      flex: 1;
      margin-left: 20px;
      p{
        line-height: 40px;
        font-size: 18px;
        padding: 0 20px;
        font-weight: bold;
        border-top: 1px solid #347AF8;
        background: #FFF;
        span{
          float: right;
          font-weight: normal;
          font-size: 16px;
          &::before{
            display: inline-block;
            content: ' ';
            width: 12px;
            height: 12px;
            border-radius: 10px;
            vertical-align: middle;
            margin-right: 4px;
          }
        }
        .fault{
          &::before{
            background: #F56C6C;
          }
        }
        .healthy{
          &::before{
            background: #67C23A;
          }
        }
      }
      .pic{
        display: block;
        width: 100%;
        height: 170px;
      }
    }
  }
  .footer{
    height: 70px;
    line-height: 70px;
    background: #FFF;
    color: #909399;
    text-align: center;
    margin-top: 16px;
  }
  </style>
  